Este efecto se crea con tres cajas, y las sombras se añaden con la clase "blur" y "shadow" para el ejemplo se va a añadir las sombras en color gris pero si utilizáis un color de fondo para el blog es recomendable que la sombra sea del mismo color pero en tono más oscuro.
Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:
.blur{
background-color: #ccc; /*color de sombra 1ª*/
color: inherit;
margin-left: 4px; /*borde izquierdo*/
margin-top: 4px; /*borde superior*/
}
.shadow,
.content{
position: relative;
bottom: 2px;/*borde inferior*/
right: 2px; /*borde derecho*/
}
.shadow{
background-color: #666; /*color de sombra 2ª*/
color: inherit;
}
.content{
background-color: #fff; /*color de fondo de la caja*/
color: #000; /*color de texto*/
border: 1px solid #000; /*borde de la caja*/
padding: .5em 2ex;
}
Guardamos los cambios y nos dirigimos al editor de entradas donde añadiremos lo siguiente:
<div class="blur">
<div class="shadow">
<div class="content">aquí el contenido de la caja</div>
</div>
</div>
En nuestro blog veríamos algo así:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgK_vYbQa5ZK9lRHj9Y_wz6gxDkwVA0hL1YWIqEGdigK1vEwLNPxoPyOHuVGkZbYQpwed4Z3PVG5nq3VKPwKs9lLo7ST0xBFi7Pub9h1R3i5NeL-aqACxwpshDSoCLmYbKzkaD/s0/fsscr014.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszo5LunfyHhjw2ZAacXihWVjECRvRTwFhFOMsSYN7NfgNzruF2wnctgXJ-ML7zYd81uqhe7gRUPkrId5WGlwdpSf-pi8ncWspVyVbzsYjG-wOmIX0YnVuhrEuhA9e466rDvUT/s400/1.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7YkgpPO_epcj0lCcpuk14PcrowZaiNi0aNsBMaIszVuev5qLLehiDSiWrIUXlTrPZrRsSIw-qosjqthLC-jO1ay1EAqJt4dGc_r1x8oZrvdcTnzS0F2kv7pSjqkNriA3XhcgS/s400/2.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRfitWo1fVbNUNHwZfvLhPVxWi14F6r3gvonaFfsDf2IfnBRwpzlZP08_ZD7BBDGwXcyFNGRawEFMtmMx_ldLlVdqJ5yrWToLc-Tr4R3OgBZ9ZN-3zhwlMy3LElYFYgaJbw2Mf/s400/5.jpg)
Visto en Desarrolloweb
Ya llevaba yo tiempo queriendo hacer algo así! Muchas gracias por la información!
me está divirtiendo este blog no encuentro la forma de ponerme en contacto con Meigo¿puedes decirme como encontrarle?gracias
un beso Marina
Hola, me gusta mucho tu blog, me esta sirviendo de mucha ayuda para poder decorar el mio, tienes cosas muy interesante. Gracias
Gem@, fíjate en los backlins de esta entrada...a mi también me está pasando en las últimas entradas publicadas. ¿Blogger loco otra vez? :O
Pues yo no consigo el sombreado.
Después de copiar lo de .blur, cuando te refieres al editor de entradas es e de la "Creación nueva entrada" donde debo escribir lo de: div class >> ?
Estoy intentanod aprender. Gracias por tu ayuda.
Hola Gema,
se me ve fatal...
Los bordes muy gordos y no se adapta al ancho del blog. Además no veo los sombreados,
he intentado tocar alguna variable, pero no consigo hacerlos más pequeños.
Gracias por tu blog,
Elén
Me gustaria saber como saludar a Meigo,fallecio mi marido y el me dejó unas palabras en mi blog y quisiera saludarle .gracias Gema.abrazos
Marina Pastor
Me alegra que te guste El osito con zapatos nuevos :)
Saludos Teresa Díaz estás en tu casa, espero verte por aquí :)
Rosa me di cuenta hace dos días pero pensé que era algo pasajero y volvería a la normalidad, ocurre en varios blogs. En conversaciones con J.Miur dice que podría ser algo relacionado con los widgets que muestran resúmenes de entradas de otros sitios.
Una lata la verdad porque ahora no tiene sentido mostrar esos enlaces.
Lo prudente sería esperar un poco por si se normaliza y desaparece esa multitud ¿no crees?
Así es Petrusdom cuando digo editor de entradas me refiero a "Creación nueva entrada" ahí es donde hay que añadir el segundo código que envuelve lo que escribimos.
Elén no lo veo añadido a tu blog y no puedo saber donde está el error, pero si se adapta al espacio que disponemos y los bordes los puedes modificar a tu gusto tanto en grosor como en color.
Marina contesté a su comentario en otro lugar donde le hacía saber que las noticias que tengo de Meigo son muy esporádicas.
Me comprometo a enviarle un mail haciéndole saber que tiene interés en localizarlo pero no puedo decirle lo que tardará en ponerse en contacto porque parece ser que no se conecta mucho a Internet.
Siento lo de su marido.
Hola:
Me congratula mucho como has realizado lo de los cuadros, voy a probarlo en el blog y así le doy un poco de calorcito, que está muy frío. Gracias Mil!
Gracias a ti Boloo :)
No entiendo Gema, quiere decir que debemos poner el código en cada entrada?
No se podría poner directamente para que saliese automáticamente en todass las entradas.
Gracias guapa
Así es Marisabel pero no es necesario que lo añadas cada vez puedes añadir el código en la plantilla de entrada y aparecerá en el editor automáticamente.
Otra solución es crear unos bordes en el espacio de los post y aunque el efecto no sea el mismo saldrá en todas las entradas incluso las que están editadas anteriormente.
Haz la prueba...
Busca donde dice .post { y debajo añade
padding : 10px;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
No te olvides que al final cierra con esto--> } y de mirar en vista previa ;)
Hola Gema, quisiera saber cómo ponerle sombra unicamente al texto ya que el fondo que tengo hace que se pierda el texto de las entradas y de la side bar... mil gracias por toda tu ayuda. :D
atte. Rodrigo.
rod.fdez@hotmail.com
http://www.templodeannan.blogspot.com/
:: Contestado está en el otro comentario :)
Muchas gracias Gemma, eres de gran ayuda
:: Gracias a ti por comentar Daniel ;)
Hola Gema, mira pensé que lo había hecho bien, pero no, te explico: puesto tal cual lo expones lo deja bien pero me aumenta a mayores el ancho del blog, y si solo pongo:
Busca donde dice .post { y debajo añade
padding : 10px;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
No me aumenta el ancho del blog pero en lugar de sombra, le da un efecto de tres dimensiones,
¿por qué?
Gracias por tu amabilidad
:: Daniel Enriquez de Guevara siguiendo estos pasos lo que conseguimos es que la ubicación de los bordes creen el efecto de sombra.
Si lo que deseas es añadir ese efecto a los post inténtalo de esta %% "forma"
Sería algo así:
.post {
width:630px;
padding:5px;
background-color:#FFF;
border: 1px solid #C0C0C0;
-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}
En width es un ancho que modificamos según el espacio de nuestros post y podemos ver el resultado en vista previa.
Ese aumento del blog es lógico porque los bordes también ocupan espacio.
Con Daniel es suficiente, muchísimas gracias queda perfecto, y gracias también por tu labor de ayuda, para los que no sabemos html eres un gran consuelo. Para poner la sombra en los gadgets ¿Qué habría que poner?
:. Serían los mismos estilos Daniel, sólo que con menos anchura, y si no me equivoco donde tienes .sidebar .widget, main.widget :)
No me di cuenta que algunos códigos se convirtieron en emoticones en el comentario anterior :S
En general muy bien, el único problema es que en la sidebar tengo gadgets de varios tamaños, y este código no los respeta dado que los deja todos iguales, Si quieres verlo, http://wwwmundonuevo-daniel.blogspot.com
:: Pues yo lo veo muy bien, estoy por decir que mucho mejor si se adapta todos al mismo ancho :)
Me explico mejor, al poner dos filas, esencialmente para que me entre todo (también porque estéticamente pienso que queda mejor), donde pone "Noticias" me queda muy pequeño, ya que lo deja al mismo ancho que todos los otros, pasa lo mismo al final,
:: Lamento la demora Daniel, sobre ese problema si aún no lo has solucionado puede intentarse añadiendo estilos a esos gadgets incluyendo la medida de cada uno.
Lo primero es averiguar la id de cada gadget eso lo sabremos mirando en la plantilla y veremos algo así:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
En el ejemplo la id de el gadget sería HTML2 lo copiamos y creamos los estilos.
#HTML2 {
aquí los estilos de la sombra y la medida que le damos al gadget.
width:190px;
height:240px;
}
Nota: solo los miembros de este blog pueden publicar comentarios.